<script>
import Test from './components/Test'

export default {
  name: "App",
  components: {
    Test,

  },
  data() {
    return {
      keyword: '',
      games: [
        {id: 1, name: 'GTA V'},
        {id: 2, name: '植物大战僵尸'},
        {id: 3, name: '上古卷轴5'},
        {id: 4, name: '天际线2'},
      ],
    }
  },

}
</script>

<template>
  <div class="App">
    <!--    <Test title="游戏">
          <ul slot="body">
            <li v-for="game in games" :key="game.id">
              {{ game.name }}
            </li>
          </ul>
          <h4 slot="foot">
            这是游戏列表
          </h4>
        </Test>
        <Test title="电影">
          <img slot="body" src="//preview.qiantucdn.com/freepik/512/651/651590.png!qt_w320" alt="">
          <h3 slot="foot">
            这是电影列表
          </h3>
        </Test>
        <Test title="书籍">
          <video slot="body" controls src="https://mp4.vjshi.com/2024-09-25/8c378ff2be894964aa9c7cad336a3b08.mp4"></video>
          &lt;!&ndash;      template中的另一种写法&ndash;&gt;
          <template v-slot:foot>
            <h3>
              这是书籍列表
            </h3>
          </template>
        </Test>-->

    <!--作用域插槽-->
    <!--monthList数据存在于子组件中    -->
    <Test title="月份">
      <template slot-scope="data">
        <ul>
          <li v-for="item in data.monthList" :key="item.id">
            {{ item.month }}
          </li>
        </ul>
      </template>
    </Test>

  </div>
</template>

<style scoped>
.App {
  display: flex;
  justify-content: space-around;
}


</style>